﻿@model IEnumerable<QuanLyGiaoVuDAL.DTO.LopMonHocDTO>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/Scripts/jquery-ui-1.9.1.js"></script>
    <script src="~/Content/js/jsToastMessage/javascript/jquery.toastmessage.js"></script>

    <link href="~/Content/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/js/jsToastMessage/resources/css/jquery.toastmessage.css" rel="stylesheet" />
    <link href="~/Content/CustomCSS.css" rel="stylesheet" />
    <title>Xếp lịch giảng dạy</title>
    <style>
        body {
            background-color: #2E5E79 !important;
        }

        .hidden {
            display: none;
        }

        .page-title {
            position: relative;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 50px;
        }

        .page-content {
            overflow: hidden;
        }

        .class-list {
            float: left;
            width: 13%;
            margin-left: 10px;
            margin-top: 10px;
            min-height: 100px;
            border: 1px solid #DDDDDD;
            background-color: #fff;
        }

        .class-item, .chosen-class-item {
            cursor: pointer;
            background-color: #DA4F49 !important;
            background-image: -moz-linear-gradient(center top, #EE5F5B, #BD362F) !important;
            background-image: -webkit-linear-gradient(center top, #EE5F5B, #BD362F) !important;
            background-image: -linear-gradient(center top, #EE5F5B, #BD362F) !important;
            background-image: -o-linear-gradient(center top, #EE5F5B, #BD362F) !important;
            background-repeat: repeat-x;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
            border: 1px solid #888;
            border-radius: 4px 4px 4px 4px;
            font-size: smaller;
            line-height: normal;
            overflow: hidden;
            padding: 3px;
            text-shadow: none;
            white-space: nowrap;
            margin: 2px;
            -moz-user-select: -moz-none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .selected {
            color: #4cff00 !important;
        }

        .timetable {
            float: right;
            border: 1px solid #DDDDDD;
            border-radius: 4px 4px 4px 4px;
            margin: 0 0 10px;
            padding: 0;
            position: relative;
            margin-top: 10px;
            width: 85%;
        }

            .timetable table {
                width: 100%;
                background-color: #fff;
                border-collapse: collapse;
            }

                .timetable table thead {
                    background-color: rgba(125, 125, 125, 0.1);
                }

                    .timetable table thead tr td {
                        text-align: center;
                    }

                .timetable table tbody tr {
                    height: auto;
                }

                    .timetable table tbody tr td {
                        min-width: 250px;
                        width: 50%;
                        font-size: 15px;
                        border: 1px solid rgba(125, 125, 125, 0.1);
                    }

        .tableCell td {
            border: none !important;
        }

        .tableCell table {
            border-collapse: separate !important;
            background-color: transparent !important;
        }

        ul {
            margin: 0px;
            padding: 0px;
        }

            ul li {
                list-style: none;
                font-size: 15px;
                cursor: pointer;
                background-color: #DA4F49;
                background-image: -moz-linear-gradient(center top, #EE5F5B, #BD362F);
                background-image: -webkit-linear-gradient(center top, #EE5F5B, #BD362F);
                background-image: -linear-gradient(center top, #EE5F5B, #BD362F);
                background-image: -o-linear-gradient(center top, #EE5F5B, #BD362F);
                background-repeat: repeat-x;
                border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
                border: 1px solid #888;
                border-radius: 4px 4px 4px 4px;
                font-size: smaller;
                line-height: normal;
                overflow: hidden;
                padding: 3px;
                text-shadow: none;
                white-space: nowrap;
                margin: 2px;
            }

                ul li.selected {
                    background-image: -moz-linear-gradient(center top, #4cff00, #BD362F);
                    background-image: -webkit-linear-gradient(center top, #4cff00, #BD362F);
                    background-image: -ms-linear-gradient(center top, #4cff00, #BD362F);
                    background-image: -linear-gradient(center top, #4cff00, #BD362F);
                    background-image: -o-linear-gradient(center top, #4cff00, #BD362F);
                    background-color: #4cff00;
                }

        table .sub-table td {
            border: #1486c8 solid 1px;
            text-align: center;
        }

        .tableCell table tbody tr td.selected {
            background-image: -moz-linear-gradient(center top, #4cff00, #BD362F);
            background-image: -webkit-linear-gradient(center top, #4cff00, #BD362F);
            background-image: -ms-linear-gradient(center top, #4cff00, #BD362F);
            background-image: -linear-gradient(center top, #4cff00, #BD362F);
            background-image: -o-linear-gradient(center top, #4cff00, #BD362F);
            background-color: #4cff00;
        }

        .selectable {
            background: #0094ff !important;
        }

            .selectable:hover {
                background-color: red !important;
            }

        #context-menu a {
            border: 1px solid #0094ff;
            text-decoration: none;
            padding: 10px;
            margin: 0 auto;
            clear: both;
            width: 90%;
            float: left;
            margin: 0 auto;
            text-align: center;
            margin-top: 10px;
        }

        .title-column {
            width: 50px !important;
            min-width: 50px !important;
        }

        .tooltip {
            font-size: 12px;
        }

        #titleText {
            float: left;
        }

            #titleText span {
                font-size: 22px;
                font-family: 'Ubuntu',Tahoma,sans-serif;
                font-weight: bold;
                color: #fff;
                line-height: normal;
                margin-left: 20px;
            }

        .actionMenu {
            float: right;
            position: relative;
        }

        td {
            -moz-user-select: -moz-none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        div.menu-title {
            background: none repeat scroll 0 0 #E6F0F3;
            border-bottom: 1px solid #B3CBD6;
            color: #1B548D;
            font-weight: bold;
            padding: 8px 12px;
        }
    </style>
</head>
<body>
    <div class="page-title">
        <div id="titleText">
            <span>Xếp lịch giảng dạy</span>
        </div>
        <div class="actionMenu">
            <input type="button" value="Xếp tự động" onclick="XepLichTuDong()" />
            <input type="button" value="Lưu kết quả" onclick="LuuKetQua()" />
            <input type="button" value="Xuất file excel" onclick="XuatLich()" />
            <input type="button" value="Hủy tất cả" onclick="Reset()" />
            <input type="button" value="Về trang chủ" onclick="javascript:window.location='/'" />
        </div>
    </div>
    <div class="page-content">

        <div class="class-list" id="classList">
            <div class="menu-title">
                <span>Lớp chưa xếp lịch</span>
            </div>
            <div>
            @if (Model.Count() > 0)
            { 
                <ul>
                    @foreach (QuanLyGiaoVuDAL.DTO.LopMonHocDTO lop in Model)
                    {
                        var khaNangString = string.Empty;
                        foreach (var kn in lop.DanhSachKhaNang)
                        {
                            khaNangString += kn.ToString() + ",";
                        }
                        khaNangString = khaNangString.Trim(',');
                        <li class="class-item" id="@lop.LopMonHocId" data-tclt="@lop.MonHoc.SoTinChiLyThuyet" data-id="@lop.LopMonHocId" data-khanang="@khaNangString" data-chon="@lop.KhaNangDuocChonString" title="@lop.MaLopVaTenMonHoc <br /> Giảng viên: @lop.GiangVien1.GetTenVaHocVi() <br /> Số tín chỉ: @lop.MonHoc.TongSoTinChi <br /> Lớp: @lop.LopSinhVien.TenLop">@lop.MaLopVaTenMonHoc</li>    
                    }
                </ul>
            }
            else
            {
                <span>Không có lớp nào.</span> 
            }
            </div>
        </div>
        <div class="timetable">
            <table>
                <thead>
                    <tr>
                        <td></td>
                        <td>
                            <table>
                                <tr>
                                    <td colspan="2" class="unselectable">
                                        <label class="unselectable">Sáng</label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Ca 1
                                    </td>
                                    <td>Ca 2
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <table>
                                <tr>
                                    <td colspan="2">Chiều
                                    </td>
                                </tr>
                                <tr>
                                    <td>Ca 3
                                    </td>
                                    <td>Ca 4
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="title-column">Thứ 2</td>
                        <td class="tableCell" id="c1"></td>
                        <td class="tableCell" id="c3"></td>
                    </tr>
                    <tr>
                        <td class="title-column">Thứ 3</td>
                        <td class="tableCell" id="c5"></td>
                        <td class="tableCell" id="c7"></td>
                    </tr>
                    <tr>
                        <td class="title-column">Thứ 4</td>
                        <td class="tableCell" id="c9"></td>
                        <td class="tableCell" id="c11"></td>
                    </tr>
                    <tr>
                        <td class="title-column">Thứ 5</td>
                        <td class="tableCell" id="c13"></td>
                        <td class="tableCell" id="c15"></td>
                    </tr>
                    <tr>
                        <td class="title-column">Thứ 6</td>
                        <td class="tableCell" id="c17"></td>
                        <td class="tableCell" id="c19"></td>
                    </tr>
                    <tr>
                        <td class="title-column">Thứ 7</td>
                        <td class="tableCell" id="c21"></td>
                        <td class="tableCell" id="c23"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="chonCaDialog">
        <div id="context-menu">
            <input type="hidden" id="buoiId" value="" />
            <a href="#" onclick="ChonCaTruoc()" id="btnCaTruoc"></a>
            <a href="#" onclick="ChonCaSau()" id="btnCaSau"></a>
        </div>
    </div>
    <div id="xuatLichDialog">
    </div>
    <div id="xuatLichForm">
        <form method="post" action="/XepLich/XuatFileDefault" id="frmXuatFile"></form>
    </div>

    <div id="guiThongbaoDialog">
        <div id="ketQuaXepLichText" style="width: 100%; height: 100%"></div>
    </div>

    <script>
        var selectedId = null;
        var currentCellId = null;
        var classIds = '';

        function MoDialog(classIds) {
            $("#guiThongbaoDialog").dialog({
                autoOpen: true,
                title: "Kết quả xếp lịch tự động",
                type: "post",
                width: 500,
                height: 600,
                buttons: {
                    "Gửi thông báo cho giảng viên": function () {
                        $.ajax({
                            url: "/XepLich/GuiThongBaoGiangVien",
                            type: "post",
                            data: {
                                malops: classIds
                            },
                            success: function (data) {
                                if (data.success) {
                                    ToastManager.showSuccessToast("Gửi thông báo thành công!");
                                }
                                else {
                                    ToastManager.showStickyWarningToast("Gửi thông báo thất bại!");
                                }
                            }

                        });
                    },
                    "Hủy": function () {
                        $("#guiThongbaoDialog").dialog("close");
                    }
                }
            });
        }

        $(document).ready(function () {
            $(document).tooltip({
                tooltipClass: "tooltip"
            });

            RefreshTable();

            $("#guiThongbaoDialog").dialog({
                autoOpen: false,
                title: "Kết quả xếp lịch tự động",
                width: 500,
                height: 600,
                buttons: {
                    "Gửi thông báo cho giảng viên": function () {
                        $.ajax({
                            url: "/XepLich/GuiThongBaoGiangVien",
                            type: "post",
                            data: {
                                malops: classIds
                            },
                            success: function (data) {
                                if (data.success) {
                                    ToastManager.showSuccessToast("Gửi thông báo thành công!");
                                }
                                else {
                                    ToastManager.showStickyWarningToast("Gửi thông báo thất bại!");
                                }
                            }

                        });
                    },
                    "Hủy": function () {
                        $("#guiThongbaoDialog").dialog("close");
                    }
                }
            });

            $("#classList").click(function () {
                if ($(this).hasClass("selectable") && selectedId != null) {
                    var selectedClass = $('#' + selectedId);
                    var caId = parseInt(selectedClass.data("chon"));
                    var buoiId = caId % 2 == 0 ? caId - 1 : caId;
                    selectedClass.data("chon", "");
                    selectedClass.removeClass("hidden");
                    RefreshTableCell(buoiId);
                    $(this).removeClass("selectable");
                    $(".timetable").find("td").removeClass("selectable");
                }
            });

            $(".class-item").dblclick(function () {
                $(".class-item").removeClass("selected");
                $(".chosen-class-item").removeClass("selected");
                $(".class-list").removeClass("selectable");
                $(this).addClass("selected");
                selectedId = $(this).data("id");

                var khaNang = $(this).data("khanang");
                var khaNangArray = khaNang.split(",");

                $(".timetable").find("td").removeClass("selectable");
                for (var index = 0; index < khaNangArray.length; index++) {
                    $("#c" + khaNangArray[index]).addClass("selectable");
                }
                BindActionForSelectableTableCell();
            });

            //Dialogs Initialization
            $("#chonCaDialog").dialog({
                autoOpen: false,
                title: "Chọn ca",
                width: 200,
                height: 200
            });

            $("#xuatLichDialog").load("/XepLich/XuatLich").dialog({
                autoOpen: false, model: true, width: 400, height: "auto", title: "Xuất lịch",
                buttons: {
                    "Xuất lịch": function () {
                        $("#uploadTemplate").submit();
                    },
                    "Hủy": function () {
                        $("#xuatLichDialog").dialog("close");
                    }
                }
            });

        });

        function ChonCaTruoc() {
            var buoiId = $("#buoiId").val();
            ChonCa(buoiId, buoiId);
            $("#chonCaDialog").dialog("close");
        }

        function ChonCaSau() {
            var buoiId = $("#buoiId").val();
            ChonCa(parseInt(buoiId) + 1, buoiId);
            $("#chonCaDialog").dialog("close");
        }

        function ChonCa(caId, buoiId) {
            var currentClassItem = $("#" + selectedId);
            var oldValue = currentClassItem.data("chon");
            currentClassItem.data("chon", caId);
            var lopMonHocIds = "";
            var khaNangs = "";
            $(".class-item").each(function () {
                if ($(this).data("chon") == buoiId || $(this).data("chon") == (parseInt(buoiId) + 1)) {
                    lopMonHocIds += $(this).data("id") + ",";
                    khaNangs += $(this).data("chon") + ",";
                }
            });
            if (lopMonHocIds.length > 0) {
                lopMonHocIds = lopMonHocIds.substr(0, lopMonHocIds.length - 1);
            }

            if (khaNangs.length > 0) {
                khaNangs = khaNangs.substr(0, khaNangs.length - 1);
            }

            $.ajax({
                url: "/XepLich/CellHtml",
                type: "POST",
                data: {
                    lopMonHocIds: lopMonHocIds,
                    khaNangs: khaNangs
                },
                success: function (data) {
                    if (data.success) {
                        $("#c" + buoiId).html(data.htmlContent);
                        if (currentCellId != null && currentCellId != buoiId) {
                            RefreshTableCell(currentCellId);
                            currentCellId = null;
                            $("#classList").removeClass("selectable");
                        }
                        currentClassItem.addClass("hidden");
                        selectedId = null;
                        $(".timetable").find("td").removeClass("selectable");
                        BindAction();
                    }
                    else {
                        ToastManager.showStickyWarningToast(data.message);
                        currentClassItem.data("chon", oldValue);
                    }
                }
            });
        }

        function BindAction() {
            //chosen-class-item
            $(".chosen-class-item").dblclick(function () {
                $(".class-item").removeClass("selected");
                $(".chosen-class-item").removeClass("selected");
                $(this).addClass("selected");
                selectedId = $(this).data("id");
                $(".class-list").addClass("selectable");
                currentCellId = $(this).closest("table").parent().attr("id");
                currentCellId = currentCellId.substr(1, currentCellId.length - 1);

                var khaNang = $('#' + selectedId).data("khanang");
                var khaNangArray = khaNang.split(",");
                $(".timetable").find("td").removeClass("selectable");
                for (var index = 0; index < khaNangArray.length; index++) {
                    $("#c" + khaNangArray[index]).addClass("selectable");
                }
                BindActionForSelectableTableCell();
            });
        }

        function BindActionForSelectableTableCell() {
            $(".tableCell").unbind("click");
            $("td.selectable").unbind("click").bind("click", function () {
                var buoiId = $(this).attr("id");
                buoiId = buoiId.substr(1, buoiId.length);
                if (selectedId != null) {
                    $(".class-item").each(function () {
                        var id = $(this).data("id");
                        var currentClassItem = $(this);

                        if (selectedId == id) {
                            if (currentClassItem.data("tclt") <= 2) {
                                $("#buoiId").val(buoiId);
                                if (parseInt(buoiId) % 4 == 1) {
                                    $("#btnCaTruoc").html("Ca 1");
                                    $("#btnCaSau").html("Ca 2");
                                }
                                else {
                                    $("#btnCaTruoc").html("Ca 3");
                                    $("#btnCaSau").html("Ca 4");
                                }
                                $("#chonCaDialog").dialog("open");
                            }
                            else {
                                var oldValue = $(this).data("chon");
                                $(this).data("chon", buoiId);
                                var lopMonHocIds = "";
                                var khaNangs = "";
                                $(".class-item").each(function () {
                                    if ($(this).data("chon") == buoiId || $(this).data("chon") == (parseInt(buoiId) + 1)) {
                                        lopMonHocIds += $(this).data("id") + ",";
                                        khaNangs += $(this).data("chon") + ",";
                                    }
                                });
                                if (lopMonHocIds.length > 0) {
                                    lopMonHocIds = lopMonHocIds.substr(0, lopMonHocIds.length - 1);
                                }
                                if (khaNangs.length > 0) {
                                    khaNangs = khaNangs.substr(0, khaNangs.length - 1);
                                }

                                $.ajax({
                                    url: "/XepLich/CellHtml",
                                    type: "POST",
                                    data: {
                                        lopMonHocIds: lopMonHocIds,
                                        khaNangs: khaNangs
                                    },
                                    success: function (data) {
                                        if (data.success) {
                                            $("#c" + buoiId).html(data.htmlContent);
                                            if (currentCellId != null && currentCellId != buoiId) {
                                                RefreshTableCell(currentCellId);
                                                currentCellId = null;
                                                $("#classList").removeClass("selectable");
                                            }
                                            currentClassItem.addClass("hidden");
                                            selectedId = null;
                                            $(".timetable").find("td").removeClass("selectable");
                                            BindAction();
                                        }
                                        else {
                                            ToastManager.showStickyWarningToast(data.message);
                                            currentClassItem.data("chon", oldValue);
                                        }
                                    }
                                });
                            }
                        }
                    });
                }
            });
        }

        function RefreshTableCell(cellId) {
            var lopMonHocIds = "";
            var khaNangs = "";
            $(".class-item").each(function () {
                if ($(this).data("chon") == cellId || $(this).data("chon") == (parseInt(cellId) + 1)) {
                    lopMonHocIds += $(this).data("id") + ",";
                    khaNangs += $(this).data("chon") + ",";
                }
            });
            if (lopMonHocIds.length > 0) {
                lopMonHocIds = lopMonHocIds.substr(0, lopMonHocIds.length - 1);
            }
            if (khaNangs.length > 0) {
                khaNangs = khaNangs.substr(0, khaNangs.length - 1);
            }

            $.ajax({
                url: "/XepLich/CellHtml",
                type: "POST",
                data: {
                    lopMonHocIds: lopMonHocIds,
                    khaNangs: khaNangs
                },
                success: function (data) {
                    if (data.success) {
                        $("#c" + cellId).html(data.htmlContent);
                        selectedId = null;
                        BindAction();
                    }
                    else {
                        ToastManager.showStickyWarningToast(data.message);
                    }
                }
            });
        }

        function XepLichTuDong() {
            $(".selectable").removeClass("selectable");
            $.ajax({
                url: "/XepLich/XepLich2",
                type: "POST",
                success: function (data) {
                    if (data.success) {
                        for (var index = 0; index < data.dsXepThanhCong.length; index++) {
                            var lopMonHoc = data.dsXepThanhCong[index];
                            $("#" + lopMonHoc.LopMonHocId).data("chon", lopMonHoc.ThuTuXepLich);
                            $("#" + lopMonHoc.LopMonHocId).addClass("hidden");
                        }

                        if (data.dsKhongTheXep.length > 0) {
                            var dsMaLop = "";
                            for (var index = 0; index < data.dsKhongTheXep.length; index++) {
                                dsMaLop += data.dsKhongTheXep[index].LopMonHocId + ",";
                            }
                            dsMaLop = dsMaLop.substr(0, dsMaLop.length - 1);
                            var classIds = '';

                            var message = "<label>Không thể xếp lịch cho các lớp sau: <label><br />";
                            for (var index = 0; index < data.dsKhongTheXep.length; index++) {
                                var lopMonHoc = data.dsKhongTheXep[index];
                                classIds += lopMonHoc.LopMonHocId + ",";
                                message += "- " + lopMonHoc.MaLopVaTenMonHoc + "<br />";
                                $("#" + lopMonHoc.LopMonHocId).data("chon", "");
                                $("#" + lopMonHoc.LopMonHocId).removeClass("hidden");
                            }
                            message += "<br />";
                            message += "<label>Để việc xếp lịch thuận lợi, hệ thống sẽ gửi thông báo đến các giảng viên đảm nhận các lớp trên để đề nghị thay đổi lịch giảng dạy.</label>";
                            $("#ketQuaXepLichText").html(message);
                            MoDialog(classIds.substring(0, classIds.length - 1));
                        }
                        RefreshTable();
                    }
                    else {
                        ToastManager.showStickyWarningToast(data.message);
                    }
                }
            });
        }

        function LuuKetQua() {
            $(".selectable").removeClass("selectable");
            var lopMonHocIds = "";
            var khaNangs = "";
            $(".class-item").each(function () {
                lopMonHocIds += $(this).data("id") + ",";
                khaNangs += $(this).data("chon") + ",";
            });
            if (lopMonHocIds.length > 0) {
                lopMonHocIds = lopMonHocIds.substr(0, lopMonHocIds.length - 1);
            }

            if (khaNangs.length > 0) {
                khaNangs = khaNangs.substr(0, khaNangs.length - 1);
            }

            $.ajax({
                url: "/XepLich/LuuKetQuaXepLich",
                type: "POST",
                data: {
                    lopMonHocIds: lopMonHocIds,
                    khaNangs: khaNangs
                },
                success: function (data) {
                    if (data.success) {
                        ToastManager.showSuccessToast("Lưu kết quả thành công.");
                    }
                    else {
                        ToastManager.showStickyWarningToast(data.message);
                    }
                }
            });
        }

        function RefreshTable() {
            $(".selectable").removeClass("selectable");
            $(".timetable").find("td.tableCell").each(function () {
                $(this).html("");
            });
            for (var cellIndex = 1; cellIndex < 24; cellIndex += 2) {
                var isRefreshed = false;
                $(".class-item").each(function () {
                    if ($(this).data("chon") == (cellIndex) || $(this).data("chon") == (cellIndex + 1)) {
                        isRefreshed = true;
                        $(this).addClass("hidden");
                    }
                });
                if (isRefreshed)
                    RefreshTableCell(cellIndex);
            }
        }

        function XuatLich() {
            $("#frmXuatFile").submit();
        }

        function Reset() {
            if (confirm("Hủy thông tin xếp lịch của tất cả các lớp?"))
            {
                $(".selectable").removeClass("selectable");
                $(".class-item").each(function(){
                    $(this).data("chon", "");
                    $(this).removeClass("hidden");
                });
                $(".timetable").find(".tableCell").each(function () {
                    $(this).html("");
                });
            }
        }

    </script>
</body>
</html>
